<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贷款申请</title>
    <script language="javascript" type="text/javascript" src="../vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="../elementUI/elementUI2.x.js"></script>
    <!--        <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-form .el-form-item{
            width: 30%;
            display: inline-block;
        }

        /*图片上传*/
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 20px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 150px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 200px;
            height: 150px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :model="ruleForm" status-icon
             :rules="rules" ref="ruleForm" label-width="100px">
        <el-row>
            <el-col :span="24"><h1>申请贷款信息提交</h1></el-col>
        </el-row>
        <!--        用户id-->
        <input type="hidden" name="user_id" v-model="ruleForm.user_id" value="">
        <!-- 分割线-->
        <el-divider></el-divider>

        <el-form-item label="申请账号" prop="user_mail">
            <el-input name="user_mail" :disabled="true" v-model="ruleForm.user_mail"></el-input>
        </el-form-item>

        <el-form-item label="申请理由" prop="loans_purpose">
            <el-input type="textarea" name="loans_purpose" v-model="ruleForm.loans_purpose"></el-input>
        </el-form-item>

        <el-form-item label="申请金额" prop="loans_money">
<!--            <el-input type="number" name="loans_money" v-model="ruleForm.loans_money"></el-input>-->
            <el-select v-model="ruleForm.loans_money" placeholder="请选择">
                <el-option
                        name="loans_money"
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="身份证正反面" prop="id_card_img">
            <el-upload
                    class="avatar-uploader"
                    name="id_card_img"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgFileChange_id_card">
                <img v-if="ruleForm.id_card_img" :src="ruleForm.id_card_img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="近六个月流水" prop="bill_img">
            <el-upload
                    class="avatar-uploader"
                    name="bill_img"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgFileChange_bill">
                <img v-if="ruleForm.bill_img" :src="ruleForm.bill_img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="工作证明" prop="certificate_of_employment_img">
            <el-upload
                    class="avatar-uploader"
                    name="certificate_of_employment_img"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgFileChange_certificate">
                <img v-if="ruleForm.certificate_of_employment_img" :src="ruleForm.certificate_of_employment_img"
                     class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="征信报告" prop="credit_report_img">
            <el-upload
                    class="avatar-uploader"
                    name="credit_report_img"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgFileChange_credit">
                <img v-if="ruleForm.credit_report_img" :src="ruleForm.credit_report_img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="房屋产权证" prop="housing_ownership_certificate_img">
            <el-upload
                    class="avatar-uploader"
                    name="housing_ownership_certificate_img"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgFileChange_housing">
                <img v-if="ruleForm.housing_ownership_certificate_img" :src="ruleForm.housing_ownership_certificate_img"
                     class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交申请</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ruleForm: {
                user_id: '',
                user_mail: '',
                loans_purpose: '',
                loans_money:'',
                id_card_img: '',
                bill_img: '',
                certificate_of_employment_img: '',
                credit_report_img: '',
                housing_ownership_certificate_img: ''
            },
            options: [{
                value: 5000,
                label: '5000'
            }, {
                value: 5_0000,
                label: '5,0000'
            }, {
                value: 10_0000,
                label: '10,0000'
            }, {
                value: 50_0000,
                label: '50,0000'
            }, {
                value: 100_0000,
                label: '100,0000'
            }],
            rules: {},
            imgfile1: null,
            imgfile2: null,
            imgfile3: null,
            imgfile4: null,
            imgfile5: null
        },
        mounted: function () {
            //加载信息
            axios.post('/user/getUserInfo').then((resp) => {
                const user = resp.data.user;
                this.ruleForm.user_id = user.user_id;
                this.ruleForm.user_mail = user.user_mail;
            }).catch((err) => {
                console.log(err)
            });
        },
        methods: {
            submitForm: function () {
                var files = {};
                var formData = new FormData();

                formData.append("user_id", this.ruleForm.user_id);
                formData.append("loans_purpose", this.ruleForm.loans_purpose);
                formData.append("loans_money", this.ruleForm.loans_money);

                if(this.imgfile1!=null){
                    formData.append("idCardImg", this.imgfile1);
                }if(this.imgfile2!=null){
                    formData.append("billImg", this.imgfile2);
                }if(this.imgfile3!=null){
                    formData.append("certificateOfEmploymentImg", this.imgfile3);
                }if(this.imgfile4!=null){
                    formData.append("creditReportImg", this.imgfile4);
                }if(this.imgfile5!=null){
                    formData.append("housingOwnershipCertificateImg", this.imgfile5);
                }
                // console.log(files);

                // //提交信息
                axios.post('/user/submitLoansInfo', formData).then((resp) => {
                    console.log('resp:' + resp.data);
                    if (resp.data == "0") {
                        vm.$message({
                            type: 'success',
                            message: '提交成功'
                        })
                        setTimeout(function () {
                            parent.window.location.reload();
                        }, 1000)
                    } else if (resp.data == "1"){
                        vm.$message({
                            type: 'error',
                            message: '提交失败'
                        })
                    }else if (resp.data == "2") {
                        vm.$message({
                            type: 'warning',
                            message: '请先绑定银行卡'
                        })
                    }
                }).catch((err) => {
                    console.log(err)
                });
            },
            //图片上传
            imgFileChange_id_card(file) {
                this.ruleForm.id_card_img = URL.createObjectURL(file.raw);
                this.imgfile1 = file.raw;
            },
            imgFileChange_bill(file) {
                this.ruleForm.bill_img = URL.createObjectURL(file.raw);
                this.imgfile2 = file.raw;
            },
            imgFileChange_certificate(file) {
                this.ruleForm.certificate_of_employment_img = URL.createObjectURL(file.raw);
                this.imgfile3 = file.raw;
            },
            imgFileChange_credit(file) {
                this.ruleForm.credit_report_img = URL.createObjectURL(file.raw);
                this.imgfile4 = file.raw;
            },
            imgFileChange_housing(file) {
                this.ruleForm.housing_ownership_certificate_img = URL.createObjectURL(file.raw);
                this.imgfile5 = file.raw;
            }
        },
    })
</script>
</body>
</html>
